@charset "UTF-8";

@import 'less.less';


.header {
	border-bottom: 1px solid #cdcdcd;
}

.mod {
	margin-bottom: .2rem;
	border-top: 1px solid #c6c6c6;
	border-bottom: 1px solid #c6c6c6;
	background:#e0e0df;

	h3 {
		line-height: 1.1;
		margin-bottom: .2rem;
		padding: .28rem 0 .1rem;
		border-bottom: 1px solid #c6c6c6;
	}
}

.orange {
	color: #ff6c00;
}

.check {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid #000;
	margin-top: -3px;
	text-align: center;

	.on &:after,&.on:after {
		content:'';
		position: absolute;
		left: 50%;
		top: 50%;
		width:8px;
		height:8px;
		background:#000;
		border-radius: 50%;
		.transform(translate(-50%,-50%));
	}

}

.loading {
	position: absolute;
	width: 100%;
	bottom: 4px;
	text-align: center;
	img {width: 20px;}
 	span.text {
 		background: rgba(0,0,0,.8);
 		box-shadow: 0 0 10px rgba(0,0,0,.8);
 		color: #fff;
 		display: inline-block;
 		line-height: 30px;
 		padding: 0 30px;
 		font-size: 12px;
 	}
 	span.text.on {
 		opacity:0;
 		.trans(.3s);
 	}
	&.hide {display: none;}
}
 



/*     product-list    */

.prod-filter {

	line-height: .78rem;
	text-align: center;

	li {
		width: 50%;
		position: relative;
		z-index: 22;
		background:#fff;
		border-bottom: 1px solid #cdcdcd;
		.fr {
			padding-right: .27rem;
		}

		a {
			display:inline;
		}
	}

	li + li {
		border-left: 1px solid #cdcdcd;
	}

	.list {
		display: none;
		background:rgba(0,0,0,.3);
		height: 100%;
		position: absolute;
		width: 100%;
		text-align: left;
		z-index: 22;

		dd {
			.g;
			background:#fff;
			border-bottom: 1px solid #cdcdcd;
		}

		.icon {
			visibility:hidden;
		}

		dd.on .icon {
			visibility:visible;
		}
	}

	&.on{
		.i-addition {
			background-position: 0 -34px;
		}
		.list {
			display: block;
		}
	}
}


.prod-list {
	
	.img-list {
		padding: 1% 0 10%;

		li {
			margin: 0 4% 4%;
			width: 42%;
			font-size: 13px;

			img {
				height: 3.89rem;
				margin-bottom: 6px;
			}
			p {
				.one-line;
			}
			span {
				color: #969696;
			}
		}
	}
}


/*   prod-info    */
.prod-info {
	.price {
		padding: .26rem 4% .2rem;
		text-align: center;
		span {
			color: #969696;
		}
	}
	.swiper-gap {
		padding: 0 .94rem;
		text-align: center;
		color: #8c8a8b;

		.swiper-container-horizontal > .swiper-pagination {
			bottom: 30px;
		}
	}

	.attr  {
		padding-top: .3rem;
		& > div {
			float: left;
			width: 32%;
			background-color:#e0e0df;
			line-height: 42px;
			height: 42px;
		}

		& > div + div {
			margin-left: 2%;
		}
		
		.select {
			position: relative;
		}

		.select-arr {
			position: absolute;
			right: 10px;
		}
		select {
			position: relative;
			width: 100%;
			padding: 0 .2rem;
			color: #8c8a8b;
			background: none;
		}


		.calc {
			position: relative;
			font-size: 0;
			text-align: center;
			
			a {
				width: .5rem;
				position: absolute;
				top: 0;
				opacity:.6;
			}
			.min {
				left: 3px;
			}
			.add {
				right: 3px;
			}
		}

		input {
			width: 1.04rem;
			height:.5rem;
			line-height: .5rem;
			padding: 0;
			vertical-align: middle;
			text-align: center;
			margin-top: 1px;
		}
	}


 	.submit-btn {
		margin: 30px 0 10px;
		a {
			height: 42px;
			border: 1px solid #000;
			width: 48%;
			float: left;
			color: #000;
		}
		.pay-btn {
			color: #fff;
			background: #000;
			margin-left: 4%;
		}
	}

	//分享
	.jiathis_style_m {
		display: none;
		position: absolute;
		right: 0;
		&.on {display: block;}
	}
	
	.jiathis_txt {display: none;}


	.cart-popup {
		position: absolute;
		left: 50%;
		top: 50%;
		.transform(translate(-50%,-50%));
		width: 281px;
		height: 133px;
		padding-top: 7px;
		font-size: 18px;
		border-radius: 6px;
		background:#fff url(../images/cart_popup.png) no-repeat;
		text-align: center;

		p {
			padding-left: 40px;
			line-height: 70px;
			color: #000;
		}

		a {
			display: inline-block;
			width: 118px;
			line-height: 37px;
			border: 1px solid #bdbdbd;
			color: #7c7c7c;
		}

		a + a {
			margin-left: 8px;
			border-color: #000;
			background: #000;
			color: #fff;
		}
	}



	.share {
		padding: .5rem 0;
		.i-heart.on {background-position: -24px -121px;}
	}

	.detal-btn {
		padding: 10px 0;

		&.on img {
			.transform(rotateX(-180deg))
		}
	}

	
	.detal {
		display: none;
		background:#fff;

		.tit {
			line-height: .8rem;
			font-size: 16px;
			text-align: center;margin-bottom: -.2rem;
		}

		.mod {
			line-height: .36rem;
			padding: 0 4% .2rem;
		}

	}
	
	.detal.on {
		display: block;
	}

}



/*    user    */
.user {
	&-icon {
		margin-top: -16px;
		padding-top: .4rem;
		background:#e0e0df;
		text-align: center;

		p {
			line-height: .9rem;
		}
	}

	&-bar {
		padding:.2rem 0;
		margin-bottom: .33rem;
		line-height: .4rem;
		background:#3b3d3d;
		color: #c6c6c6;
		text-align: center;

		li + li {
			border-left: 1px solid #fff;
		}
	}

	&-index {

		.mod {
			padding: 0 4%;
			line-height: .9rem;
		}
		h3 {
			padding-bottom: .25rem;
		}

		li {
			line-height: 1.6;
		}

		span {
			color: #3d3d3d;
		}

		span.fl {
			margin-right: .3rem;
		}
		
		a {
			display: block;
		}

	}
}

.order {
	background:#e0e0df;

	li {
		line-height: .8rem;
		border-bottom: 1px solid #c6c6c6;

		span:first-child {
			display: inline-block;
			width: 1.8rem;
			text-align: right;
			margin-right: .3rem;
		}
	}
}

.order-bar {
	position: relative;
	z-index: 99;
	line-height: .8rem;
	border-bottom: 1px solid #cacaca;
	text-align: center;
	
	ul {width: 120%;position: relative;}
	
	li {
		width: 16%;
		margin-bottom: -1px;
		border-bottom: 1px solid transparent;
	}
	li.current {
		border-bottom: 1px solid #000;
	}

	li + li {
		border-left: 1px solid #cacaca;
	}
}

.order-detal {
	.gap + .gap {
		border-top: 6px solid #f2f2f2;
	}
	.address {
		
		.table {
			display:table;
			padding: .2rem 0;
			line-height: 1.3;
			font-size: 13px;
			width: 100%;


			& > * {
				display:table-cell;
				vertical-align: middle;

			}
			
			& > *:first-child {
				width: .2rem;
			}
			.txt {
				padding: 0 4% 0 6%;
			}

			p {
				margin-bottom: 4px;
			}


		}

		.table + .table {
			border-top: 1px solid #ddd;
		}
	}	
	
}

.total-info {
	padding: .3rem 0 .5rem;
	tr {
		
		border-bottom: 6px solid #fff;
		background:#f4f4f4;
	}


	td {
		padding:4% 10px;
	}

	img {
		width: 1.2rem;
		height: 1.36rem;
	}

	& + .total-info {
		border-top: 1px solid #c6c6c6;
	}

	.total-txt {
		text-align: right;
	}

	.btns {
		height: 30px;
		margin-top: 10px;
		line-height: 28px;
		color: #000;
		
		text-align: center;
		
		a {
			border: 1px solid #000;
			width: 48%;
			float: left;
		}
		a + a {
			float: right;
			background: #000;
			color: #fff;
		}

	}	
}



/*     cart-list    */
.cart-list {
	li {
		position: relative;
		padding: .3rem .5rem;
		img {
			width:2.6rem;
			height: 3rem;
			margin-right: .5rem;
		}
		
		.txt > * + * {
			padding-top: .03rem;
		}
		.calc {
			line-height: 26px;
		}
		.calc-box {			

			position: relative;
			width: 80px;
			line-height: 26px;
			border: 1px solid #000;
			text-align: center;
			
			a {
				width: .3rem;
				position: absolute;
				top: 0;
			}

			input {
				width: 30px;
				height: 20px;
				color: #333;
				padding: 0;
				line-height: 20px;
				text-align: center;
			}
			.min {
				text-align: center;
				left: 3px;
			}
			.add {
				text-align: center;
				right: 3px;
			}

		}

		.check {
			position: absolute;
			top: 50%;
			.transform(translateY(-50%));

		}

		.icon {vertical-align: baseline;}		

	}

	.cart-bar {
		border-top: 1px solid #c6c6c6;
		background:#e0e0df;
		line-height: .8rem;
		padding-left: .4rem;
		
		.all-check {
			margin-right: .4rem;
			.check {
				margin-right: .06rem;
			}
		}
		.btn {
			margin-left: .26rem;
			background:#000;
			color: #fff;
			width: 1.6rem;
			line-height: .8rem;
			text-align: center;
		}
	}
}

.notice {
	padding: .28rem 4%;
	background:#3b3d3d;
	color: #c6c6c6;

	.notice-contact {
		padding-top: 10px;
		margin-top: 10px;
		border-top: 1px solid #818282;

		h3 {
			margin-bottom: .06rem;
		}
	}

}


/*     cashier    */
.cashier {
	padding-top: .4rem;

	.add-address {
		padding-top: .2rem;
		margin-bottom: -1px;
	}
	
	.tit {
		padding: 0 .20rem;
		background:#000;
		line-height: .7rem;
		color: #fff;
	}

	.choose-address-list {
		display: none;
		padding-top: 10px;
		margin-top: 10px;
		border-top: 4px solid #ccc;
		
		&.on {display: block;}
		dd {
			margin-bottom: 10px;
			padding: 10px;
			border-radius: 6px;
			border: 1px solid #bbb;
		}
	}
	
	.dist {
		margin-bottom: .3rem;
		font-size: 13px;

		[data-click]:last-child {
			margin-left: .1rem;
		}
	}

	.content {
		padding:.15rem .2rem;
		border: 1px solid #000;

		.fr {
			margin-left: .3rem;
			padding-top: .2rem;
		}
	}

	.cashier-btn {
		display: block;
		width: 2.4rem;
		margin: .4rem auto;
		line-height: .7rem;
		color: #fff;
		font-size: 16px;
		text-align: center;
		background:#000;
	}
}



/*    collection     */
.collection {
	.total-info {
		tr {
			background: none;
			border-bottom: 1px solid #eee;

			.icon {
				margin-top: -3px;
			}

		}

		tr td:last-child {
			padding-right: 10px;
			text-align: right;
		}
	}
}


/*    shouhuo address     */
.sh-address {

	.select-wrap {
		margin-bottom: .2rem;
	}
	select {
		float: left;
		width: 32%;
		height: 36px;
		line-height: 36px;
		padding-left: 10px;
		font-size: 14px;
		background: #3b3d3d url(../images/select_bg.png) no-repeat 92% center /10px;
		color: #fff;

		& + select {
			margin-left: 2%;
		}

	}
}


/*    address-list     */
.address-list {
	.new-add-btn {
		display: inline-block;
		padding: 0 20px;
		line-height: 36px;
		margin-bottom: 10px;
		font-size: 16px;
		background: #000;
		color: #fff;

		span {
			display: inline-block;
			margin-right: 5px;
			font-size: 19px;
		}
	}
	li {
		margin-bottom: .24rem;
		border: 1px solid #000;
		h3 {
			padding:0 .23rem;
			line-height: .72rem;
			border-bottom: 1px solid #000;

			span {
				margin-right: .46rem;
			}

			.icon {margin-top: -3px;}

		}

		.content {
			color: #666;
			padding:.16rem .23rem .13rem;
		}

		.link {
			text-align: right;
			font-size: 16px;
			
			a {
				color: #000;
				display:inline;
			}
			a + a {

				border-left:1px solid;
				padding-left: .24rem;
				margin-left: .22rem;
			}
		}
	}
}

/*     contact    */
.contact {
	.map {
		height: 200px;
		margin-bottom: 20px;
		overflow: hidden;
	}
	.address {
		p {
			margin-bottom: 10px;
		}
		span {
			text-decoration: underline;
		}
		i {
			margin-right: 6px;
		}
	}
}


/*     news    */
.news {
	h1 {
		line-height: .7rem;
		font-size: .4rem;
		border-bottom: 1px solid #000;
	}
	li {
		padding: .32rem 0;
		border-bottom: 1px solid #bfbfbf;
		h3 {font-size: 16px;}
		span {font-size: 12px;color: #999;}
		p {color: #666;line-height: 1.3;}

	}
}

.btn.ajax-btn {
	font-size: 14px;
	margin-top: 40px;
	line-height: 30px;
	background: #000;
}



/*   web-form   */

.web-form {
	position: relative;
	padding: 30px 0 50px;


	.tit {
		padding-bottom: .55rem;
		font-size: .4rem;
		text-align: center;
	}

	input {
		display: block;
		width: 100%;
		height: 36px;
		margin-bottom: .2rem;
		background:#3b3d3d;
		color: #fff;
	}

	textarea {
		resize:none;
		width: 100%;
		height: 100px;
		padding: 10px;
		border: 1px solid #000;
	}

	button {
		width: 100%;
		height: 40px;
		margin-top: .2rem;
		font-size: 16px;
		border: 1px solid #000;
		background:none;
	}

	.tip-links {
		a {
			color: #c6c6c6;
			text-decoration: underline;
		}
	}

	input[type="file"] {display: none;}

	.upload-wrap {
		.upload-btn {
			position: absolute;
			width: 100%;
			height: 36px;
			background: url(../images/upload.jpg) no-repeat right 0;
			background-size:auto 100%;
		}
	}

}

.time-line {
	position: relative;
	margin-bottom: .64rem;

	&:before {
		content:'';
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		height: 1px;
		background:#000;

	}
	.step {
		text-align: center;
		span {
			position: relative;
			z-index: 2;
			display: inline-block;
			width: .49rem;
			line-height: .49rem;
			border-radius: 50%;
			background:#888;
			color: #fff;
			text-align: center;
		}

		&.current span {
			background:#000;
		}
	}

	

	.step:first-child {
		text-align: left;
	}

	.step:last-child {
		text-align: right;
	}
}







